<template>
  <view class="hotel-item" @click="linkTo">
    <image class="photo" :src="image" mode="aspectFill"></image>
    <view class="info-box">
      <view class="name">{{name}}</view>
      <view class="t1">距您直线 {{distance}} </view>
      <view class="t2">{{subtitle}}</view>
      <view class="t3">
        <view v-for="(v, i) in label" :key="i" class="tag">{{v}}</view>
      </view>
      <view class="t4">
        ￥<text class="price">{{price}}</text>起
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "hotel-item",
    props: [
      'hotelId',
      'image',
      'name',
      'distance',
      'subtitle',
      'label',
      'price'
    ],
    data() {
      return {
        
      };
    },
    methods: {
      linkTo() {
        uni.navigateTo({
          url: '/hotel/detail?id=' + this.hotelId
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.hotel-item {
  margin: 30rpx 20rpx;
  @include flex(row,flex-start,center);
  .photo {
    width: 202rpx;
    height: 282rpx;
    background: #D8D8D8;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }
  .info-box {
    flex: 1;
    overflow: hidden;
    height: 282rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid #eee;
    .name {
      font-size: 30rpx;
      line-height: 42rpx;
      color: #3C3D3E;
    }
    .t1 {
      font-size: 24rpx;
      line-height: 34rpx;
      margin: 20rpx 0 16rpx;
    }
    .t2 {
      font-size: 24rpx;
      line-height: 34rpx;
      color: $uni-color-primary;
      margin-bottom: 16rpx;
    }
    .t3 {
      @include flex(row,center,flex-start);
      margin-bottom: 8rpx;
      .tag {
        height: 48rpx;
        padding: 0 8rpx;
        line-height: 44rpx;
        border-radius: 8rpx;
        border: 2rpx solid rgba($uni-color-primary, .53);
        box-sizing: border-box;
        margin-right: 12rpx;
        font-size: 24rpx;
        color: $uni-color-primary;
      }
    }
    .t4 {
      text-align: right;
      font-size: 24rpx;
      line-height: 42rpx;
      color: $uni-color-primary;
      .price {
        padding: 0 4rpx;
        font-size: 30rpx;
        color: $uni-color-primary;
        font-weight: bold;
      }
    }
  }
}
</style>